<!-- 电子签名 https://ext.dcloud.net.cn/plugin?id=4354 -->
<template>
	<view>
		<u-popup ref="popup" mode="bottom" :mask-close-able="false">
			<view class="content">
				<l-signature disableScroll ref="signatureRef" :penColor="penColor" :penSize="penSize"
					beforeDelay="300"></l-signature>
			</view>
			<view class="btn-bar">
				<view class="row row-between">
					<button @click="onClick('clear')">清空</button>
					<button @click="onClick('undo')">退一步</button>
				</view>
				<view class="row row-between">
					<button @click="close">不保存仅关闭</button>
					<button type="primary" @click="onClick('save')">保存并关闭</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "sign",
		props: {
			penColor: {
				type: String,
				default () {
					return '#000'
				}
			},
			penSize: {
				type: Number,
				default () {
					return 5
				}
			},
		},
		data() {
			return {
				url: '',
			};
		},
		methods: {
			onClick(type) {
				if (type == 'save') {
					this.$refs.signatureRef.canvasToTempFilePath({
						success: (res) => {
							console.log('签名res', res)
							// 是否为空画板 无签名
							console.log(res.isEmpty)
							// 生成图片的临时路径
							// H5 生成的是base64
							this.url = res.tempFilePath

							console.log('生成图片的临时路径', this.url)
							this.save()
						}
					})
					return
				}
				if (this.$refs.signatureRef)
					this.$refs.signatureRef[type]()
			},
			save(){
				this.$emit('save', this.url)
				this.close()
			},
			close(){
				this.$refs.popup.close()
			},
			open(){
				this.$refs.popup.open()
				this.$refs.signatureRef['clear']();
			}
		}
	}
</script>

<style scoped>
	.content {
		/* margin: 20rpx 0;
		padding: 24rpx; */
		height: 400rpx;
		text-align: center;
		/* border: 1px solid green; */
	}
	.btn-bar{
		padding: 24rpx;
	}
</style>